
<template>
  <XtxBread >
    <XtxBreadItem to='/'>首页</XtxBreadItem>
    <XtxBreadItem :to='`/category/${inFo.top.id}`' v-if="inFo.top">{{inFo.top.name}}</XtxBreadItem>
    <Transition name='fade-right' mode="out-in">
    <XtxBreadItem v-if="inFo.sub" :key="inFo.sub.name">{{inFo.sub.name}}</XtxBreadItem>
    </Transition>
  </XtxBread>
</template>

<script>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
export default {
  setup () {
    const store = useStore()
    const route = useRoute()
    // 过滤面包屑信息
    const obj = {}
    const inFo = computed(() => {
      store.state.category.list.forEach(top => {
        if (top.children) {
          top.children.forEach(sub => {
            if (sub.id === route.params.id) {
              obj.top = { name: top.name, id: top.id }
              obj.sub = { name: sub.name, id: sub.id }
            }
          })
        }
      })
      return obj
    })
    return { inFo }
  }
}
</script>

<style>

</style>
